<template>
	<view :class="[getSky.nameClass+' '+UNI_PLATFORM,{'sky-fixed':getSky.fixed}]"
		:style="[getSky.styles.fixed,getSky.styles.skyline]">
		<view class="skyline-navigation-body">
			<!-- #ifdef MP -->
			<view style="visibility: hidden;padding-top: var(--my-nav-safe-area);" v-if="mpWrap">占位</view>
			<!-- #endif -->
			<slot></slot>
			<view :class="['skyline-navigation-wrapper flex-wrap-between'+skyNavW]"
				:style="[{'--content':getSky.center?'center':'space-between'},getSky.styles.wrapper]">
				<view :class="['skyline-wrapper-item skyline-wrapper-'+it.class]"
					v-for="(it,outerIndex) in generateMajorsDOM" :style="[it.style]" :key="outerIndex">
					<slot :name="it.slot">
						<view :class="[it.chClass]">
							<template v-for="(ch,innerIndex) in it.default">
								<slot :name="ch.slot">
									<view :class="[ch.class]" @click="handler(ch)" :key="innerIndex">{{ch.txt}}</view>
								</slot>
							</template>
						</view>
					</slot>
				</view>
			</view>
			<slot name="foot"></slot>
		</view>
	</view>
</template>
<script>
	/**
	 *  {Object} ProcessedSkyObject
	 *  {boolean} fixed - 是否固定 - 默认为true 
	 *  {string} nameClass - 最顶层的class名默认为 'skyline-navigation'
	 *  {boolean} shouldEmitSkylineNavigation - 是否放出导航栏的高度 - 默认为true  		
	 *  {boolean} showBack - 是否显示返回按钮 - 默认为true  
	 *  {boolean} rightWrap - 是否在有胶囊的时候换行
	 *  {boolean} title - 标题
	 *  {Object} templates包含所有模块的对象
	 *  {Object} templates.left - 左侧区域
	 *  {Object} templates.center - 中间区域
	 *  {Object} templates.right - 右侧区域
	 *  {Object} styles - 包含所有样式模块的对象
	 *  {Object} styles.fixed - 定位属性对象
	 *  {string} styles.fixed.top - 定位属性 从上开始
	 *  {string} styles.fixed.right - 定位属性 从右开始
	 *  {string} styles.fixed.left - 定位属性 从左开始
	 *  {string} styles.fixed.bottom - 定位属性 从下开始
	 *  {Object} styles.skyline - 控制当前第一层skyline-navigation容器的style
	 *  {Object} styles.wrapper - 控制当前第二层skyline-navigation-wrapper容器的style 
	 * 以上的注释作用为组件提示
	 * 以下的注释作用为组件属性提示
	 * @property {Object} sky - sky对象控制所有的属性，传入sky的都是优化级
	 * @property {string} nameClass - 最顶层的class名默认为 'skyline-navigation'
	 * @property {boolean} fixed - 是否固定 - 默认为true 
	 * @property {boolean} shouldEmitSkylineNavigation - 是否放出导航栏的高度 - 默认为true  		
	 * @property {boolean} center - 标题是否居中显示	或者 展示中间区域
	 * @property {boolean} showBack - 是否显示返回按钮 - 默认为true  
	 * @property {boolean} rightWrap - 是否在有胶囊的时候换行
	 * @property {boolean} mpWrap - 是否在MP模式的时候进入占位
	 * @property {string} title - 标题
	 * @property {Object} templates  包含所有模块的对象
	 * @property {Object} templates.left - 左侧区域
	 * @property {Object} templates.center - 中间区域
	 * @property {Object} templates.right - 右侧区域
	 * @property {Object} styles - 包含所有样式模块的对象
	 * @property {Object} styles.fixed - 定位属性对象
	 * @property {string} styles.fixed.top - 定位属性 从上开始
	 * @property {string} styles.fixed.right - 定位属性 从右开始
	 * @property {string} styles.fixed.left - 定位属性 从左开始
	 * @property {string} styles.fixed.bottom - 定位属性 从下开始
	 * @property {Object} styles.skyline - 控制当前第一层skyline-navigation容器的style
	 * @property {Object} styles.wrapper - 控制当前第二层skyline-navigation-wrapper容器的style
	 * 最后提示一下，以上的属性都可以单独在组件上用，不需要写sky也可以只限第一层属性有效
	 */

	const types = {
		type: [Boolean, String],
		default: true
	};
	export default {
		props: {
			sky: {
				type: Object, // 指定类型为对象
				default: () => ({}) // 提供默认值为空对象
			},

			fixed: types,
			shouldEmitSkylineNavigation: types,
			nameClass: String,
			center: [Boolean, String],
			title: String,
			showBack: types,
			rightWrap: Boolean,
			mpWrap: Boolean,
			templates: {
				type: Object, // 指定类型为对象
				default: () => ({
					left: {},
					center: {},
					right: {}
				}) // 提供默认值为空对象
			},
			styles: {
				type: Object, // 指定类型为对象
				default: () => ({
					fixed: {},
					skyline: {},
					wrapper: {}
				}) // 提供默认值为空对象
			},
		},
		data() {
			return {
				skyNavW: ''
			};
		},
		methods: {
			handler(ch) {
				const self = this;
				const hadler = {
					/** 返回事件 */
					callBack() {
						self.$record.navigateBack();
					}
				}
				if (ch.click) {
					this.$emit(ch.click, ch);
					hadler[ch.click] && hadler[ch.click]();
				}
			}
		},

		computed: {
			generateMajorsDOM() {
				const center_selected = this.getSky.center ? "absolute-center" : "";
				const title = this.getSky.title;
				const {
					templates,
					showBack,
					rightWrap
				} = this.getSky;
				/** 左侧区域：
				 *返回按钮：用于返回上一级或退出文件管理页面。
				 */
				let RightInitial = '';
				let LeftInitial = '';
				// #ifdef MP 
				if (rightWrap) {
					RightInitial = 'RightInitial-position';
					!center_selected && (LeftInitial = 'LeftInitial');
				} else if (!center_selected && !this.mpWrap) {
					this.skyNavW = ' sky-nav-w';
				}
				// #endif
				const leftTemplate = {
					slot: 'left',
					class: `left ${center_selected} ${LeftInitial}`,
					chClass: 'left-default defaultChildren',
					default: [].concat([showBack ? {
						slot: 'left-icon',
						txt: '',
						class: 'iconfont icon-jiantou-left-s-xian',
						click: 'callBack'
					} : []], {
						slot: 'left-txt',
						txt: center_selected ? "" : title,
						click: showBack ? 'callBack' : ''
					}),
					...templates.left
				};
				/** 中间区域：
				 *标题：用于显示当前文件管理的标题，例如 "文件管理"。 
				 */
				const centerTemplate = {
					slot: 'center',
					class: 'center',
					chClass: 'center-default defaultChildren',
					default: [{
						slot: 'center-txt',
						txt: title,
						class: 'truncate-text'
					}],
					...templates.center
				};
				/** 右侧区域：
				 *新建文件按钮：用于创建新的文件。
				 *切换视图按钮：用于切换文件管理的视图模式，例如列表视图和网格视图。
				 *排序按钮：用于对文件进行排序操作。
				 *搜索框：用于输入关键词进行文件搜索。 
				 */
				const rightTemplate = {
					slot: 'right',
					class: `right ${center_selected} ${RightInitial}`,
					chClass: 'right-default defaultChildren',
					...templates.right
				};

				const ary = [leftTemplate, rightTemplate];
				center_selected && ary.splice(1, 0, centerTemplate);
				return ary;
			},
			getSky() {
				const isValidString = (str) => {
					const pattern = /^(?!0+$)(?!false$)[\u4e00-\u9fa5a-zA-Z0-9]+$/;
					return pattern.test(str)
				};
				const skyObj = {
					fixed: isValidString(this.fixed),
					showBack: isValidString(this.showBack),
					rightWrap: this.rightWrap,
					nameClass: this.nameClass || 'skyline-navigation',
					shouldEmitSkylineNavigation: isValidString(this.shouldEmitSkylineNavigation),
					center: this.center,
					title: this.title,
					templates: this.templates,
					styles: this.styles,
					...this.sky
				};
				const {
					fixed
				} = skyObj;
				// 通知中间区域是否开通了定位 
				setTimeout(() => {
					this.$eventBus.emit('navFixed', fixed);
				}, 10);
				return skyObj;
			}
		},
		mounted() {
			const {
				shouldEmitSkylineNavigation,
				fixed
			} = this.getSky;
			if (shouldEmitSkylineNavigation) {
				this.getSelect('.' + this.getSky.nameClass, (e) => {
					this.$eventBus.emit('SkylineNavigation', e.height);
				});
			}
		},

	};
</script>

<style scoped lang="less">
	.skyline-navigation {
		background: var(--skyline-navigation-background);
		padding-top: var(--navigation-top);
		transition: padding-top 0.3s ease;
	}

	.sky-fixed {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: var(--date-z-index);
	}

	.skyline-navigation-body {
		padding: var(--my-nav-safe-area);
		// width: var(--my-nav-w-safe-area)
	}

	.skyline-navigation-wrapper {
		position: relative;
		color: #FFFFFF;
		justify-content: var(--content);
		align-items: center;

	}

	.skyline-wrapper-left {
		// left: var(--my-nav-safe-area);
		left: 0;
		flex: 1;
		padding-right: 10rpx;
	}

	.skyline-wrapper-center {
		max-width: 35%;
	}

	.absolute-center {
		position: absolute;
	}

	.sky-nav-w {
		max-width: var(--my-nav-w-safe-area);
	}

	.LeftInitial {
		max-width: var(--my-nav-w-safe-area);
	}

	.RightInitial-position {
		position: static;
		flex-basis: 100%;
		flex-grow: 0;
		padding-top: var(--my-nav-safe-area);
	}

	.skyline-wrapper-right {
		right: calc(var(--my-nav-r-safe-area) - (var(--my-nav-safe-area) / 2));
	}

	.defaultChildren {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	// 微信css
	/* .mp-weixin {
		.skyline-navigation-wrapper::before {
			content: '你好';
			position: absolute;
			left: calc(var(--my-nav-w-safe-area) - var(--my-nav-r-safe-area) /5);
		}
	} */
</style>